<template>
	<div class="page" id='page'>
		<div class="virtualLine" ref="virtualLine"></div>
		<!-- 导航栏 -->
		<van-overlay :show="showOverlay">
			<div class="tcbgHeader">
				<div class="tcbg">
					<!-- <div class="gbimg">
						<img src="../../assets/img/detailedVersion/gb.png" alt="" />
					</div> -->
					<div class="toptitle">
						<div class="hs2">温馨提示</div>
						<div class="hs22">
							<img src="../../assets/img/detailedVersion/tcbgicon.png" alt="" />
						</div>
					</div>
					<!-- <p class="hs2">温馨提示</p> -->
					<div>
						<p class="hs4">1.【数据范围】</p>
						<span class="hs6">经您选择并提交的作为投保人和被保人在中国大陆持有的有效人身险保单。</span>
						<!-- <span class="hs6"
							>您作为投保人和被保人在中国大陆持有的所有有效人身险保单。</span
						> -->
					</div>
					<div>
						<p class="hs4">2.【报告说明】</p>
						<span
							class="hs6">本报告分为四个模块，其中保单梳理和其他客户权益模块包含您作为投保人和被保人的保单，保障责任解读模块仅包含您作为被保人的保单，费用筹划模块仅包含您作为投保人的保单。</span>
					</div>
					<div>
						<p class="hs4">3.【数据脱敏】</p>
						<span class="hs6">您在本报告中涉及的敏感信息(姓名和保单号)已做脱敏处理。</span>
					</div>
					<div class="botm">
						<span>本报告展示基于行业数据及保单产品信息加工处理后的相关内容，为便于理解做了适当简化和概括，
							内容仅供参考！完整责任、保费及保额等，请您查看保险合同。</span>
					</div>
					<div class="buttonStyle" @click="closeTopTitle">
						<div>知道了</div>
					</div>
				</div>
			</div>
		</van-overlay>
		<!-- isYQX 表示回到要邀请信   face表示从金事通来-->
		<!-- <div class="navBar">
			<customNavBar
				:leftTetx="leftTetx"
				:isYQX="route.query.isYsc"
				:face="route.query.face"
				:titleTest="titleTest"
			></customNavBar>
		</div> -->
		<!-- navBarJst -->
		<div class="navBarJst" ref="navBar" @click="gotop()" v-if="myHeight">
			<img class="contentg" src="../../assets/img/fhh.png" alt="" />
			<div>
				<!-- {{ titleTest }} -->
			</div>
		</div>
		<div class="navBar" ref="navBar" @click="gotop()" v-else>
			<img class="contentg" src="../../assets/img/fhh.png" alt="" />
			<div>
				<!-- {{ titleTest }} -->
			</div>
		</div>
		<!-- 页面内容 -->
		<div class="content" :class="['content', { 'contentJst': myHeight }]">
			<div ref="BasedPerson">
				<!-- 顶部内容 -->
				<div class="content_top">
					<img class="imgOne" src="../../assets/img/detailedVersion/jsbgText2Text.png" alt="" />
					<img class="imgTwo" v-if="reportType == '1'" src="../../assets/img/detailedVersion/jbicon.png"
						alt="" />
					<img class="imgTwo" v-if="reportType == '2'" src="../../assets/img/detailedVersion/xbicon.png"
						alt="" />
					<!-- <span class="riqi ">生成时间:2024-08-21 14:58:58</span> -->
					<img class="imgThree" src="../../assets/img/detailedVersion/bgxqTcon.png" alt="" />
				</div>
				<div class="content_one">
					<div class="content_one_name">
						<span class="one_one">
							{{ state.resData?.b1?.name || '-' }}
							{{ state.resData?.b1?.sex || '-' }}
							{{ state.resData?.b1?.age || '-' }} 岁
						</span>
					</div>
					<div class="content_one_bottom">
						<div class="content_one_bottom_two">
							<span class="b">生成时间：</span>
							<span class="b1">{{ reportCreateTime }}</span>
						</div>
						<div class="content_one_bottom_two">
							<span class="b">报告编号：</span>
							<span class="b1" @click="copyReportCode(reportCode)">{{ reportCode }}</span>
							<div class="copy-icon" @click="copyReportCode(reportCode)">复制</div>
						</div>
						<div class="content_one_bottom_div">
							<div class="smTop">
								<div class="sbottom_top">
									<div class="sbotop_a">
										<div class="font">
											{{ state.resData?.b2?.policyNumber }}
										</div>
										<div class="unt">件</div>
									</div>
									<div class="sbotop_b">有效保单</div>
								</div>
								<div class="sbottom_top">
									<div class="sbotop_a">
										<div class="font">
											{{ state.resData?.b2?.accPremium }}
										</div>
										<div class="unt">元</div>
									</div>
									<div class="sbotop_b">累计已交保费</div>
								</div>
								<div class="sbottom_top">
									<div class="sbotop_a">
										<div class="font">
											{{ state.resData?.b2?.appntValidPolicy }}
										</div>
										<div class="unt">件</div>
									</div>
									<div class="sbotop_b">投保人有效保单</div>
								</div>
								<div class="sbottom_top">
									<div class="sbotop_a">
										<div class="font">
											{{ state.resData?.b2?.insuredValidPolicy }}
										</div>
										<div class="unt">件</div>
									</div>
									<div class="sbotop_b">被保人有效保单</div>
								</div>
							</div>
						</div>
						<!-- 温馨提示 -->
						<div class="wxts2">
							<img class="wxtsImg2" src="../../assets/img/detailedVersion/wxts.png" alt="" />
							1.&lt;有效保单件数&gt;指您作为投保人和被保人在中国大陆持有的所有有效人身险保单的件数统计值。<br />
							2.&lt;累计已交保费&gt;指您作为投保人截至当前累计缴纳的保险费用之和。<br />
						</div>
					</div>
				</div>
			</div>
			<!-- 保单梳理 -->
			<div class="content_comc content_comcbbxr" ref="policySorting">
				<div ref="policySortingSummary">
					<div class="combTop">
						<img src="../../assets/img/detailedVersion/btp.png" alt="" />
						<div>保单梳理</div>
					</div>
					<div class="combCen">
						<span>分布汇总</span>
						<!-- <span>(有效保单件数)</span> -->
					</div>
					<!-- 饼状图 -->
					<div class="pieChartView" :key="forceUpdateKey">
						<!-- 饼状图  -->
						<echartsPie class="pieChart" :colorS="colorS" :data="state.echartsData"></echartsPie>
					</div>
					<!-- 温馨提示 -->
					<div class="wxts3">
						按照险种分类统计，同一保单下可能包含多个险种。
						<img class="wxtsImg3" src="../../assets/img/detailedVersion/wxts.png" alt="" />
					</div>
				</div>
				<!-- 明细列表 -->
				<div ref="policySortingInsured">
					<van-tabs type="card" animated class="margin_top_twenty" v-model:active="activeName"
						v-if="reportType == 2 ? true : false" @click-tab="onClickTab">
						<van-tab title="被保人" name="0">
							<!-- 表格被保人 -->
							<!--修改-->
							<div class="comc_table comc_tablebbxr">
								<table border="1" class="table_t">
									<thead class="table_d table_dbbxr">
										<tr>
											<th class='bbxrTh' style="width: 20%;">保单信息</th>
											<th style="width: 40%;">保障条款名称</th>
											<th>险种类型</th>
											<th style="width: 13%;">详情</th>
										</tr>
									</thead>
									<tbody>
										<template v-for="(item, index) in apptableData" :key="index">
											<tr class="table_tr">
												<td>
													<div>{{ item.policyNumber }}</div>
													<div v-if="item.companyName != '-'">{{ item.companyName }}</div>
												</td>
												<td colspan="3">
													<div v-for="(z, i) in item.b4DTOList" :key="i"
														:class="[z.isExpand ? i == 0 ? 'expandBorderBottom' : (i >= 1 && item.b4DTOList[i - 1].isExpand ? 'expandBorderBottom' : 'expandBorder') : '', 'showClick']">
														<div class="myflex" :class="[z.isExpand ? 'expandstyle' : '']">
															<div class="titleStyle">{{ z.insuranceClauseName }}</div>
															<div class="titleStyle">{{ z.benefitType }}</div>
															<div class="table_trBRo imgHeight" v-if="item.policyNumber != '-'"
																@click="bbrClick(z, item, i)">
																<img class="twentyImg" v-if="!z.isExpand"
																	src="../../assets/s.png" alt="">
																<img class="twentyImg" v-if="z.isExpand"
																	src="../../assets/x.png" alt="">
															</div>
															<div v-else>-</div>
														</div>
														<div v-if="z.isExpand" class="contentStyle">
															<div class="myflex">
																<div>团个性质</div>
																<div>{{ z.gpFlagStr || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>投保人</div>
																<div>{{ z.applicant || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>主附险</div>
																<div>{{ z.mainproDuctFlag || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>生效日期</div>
																<div>{{ z.effDate || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>满期日期</div>
																<div>{{ z.endDate || '--' }}</div>
																<div></div>
															</div>
														</div>
													</div>

												</td>
											</tr>
										</template>
									</tbody>
								</table>
							</div>
						</van-tab>
						<van-tab title="投保人" name="1">
							<!--投保人-->
							<div class="comc_table comc_tablebbxr">
								<table border="1" class="table_t">
									<thead class="table_d table_dbbxr">
										<tr>
											<th class='bbxrTh' style="width: 20%;">保单信息</th>
											<th style="width: 40%;">保障条款名称</th>
											<th>险种类型</th>
											<th style="width: 13%;">详情</th>
										</tr>
									</thead>
									<tbody>
										<template v-for="(item, index) in insuredtableData" :key="index">
											<tr class="table_tr">
												<td>
													<div>{{ item.policyNumber }}</div>
													<div>{{ item.companyName }}</div>
												</td>
												<td colspan="3">
													<div v-for="(z, i) in item.b5DTOList" :key="i"
														:class="[z.isExpand ? i == 0 ? 'expandBorderBottom' : (i > 0 && item.b5DTOList[i - 1].isExpand ? 'expandBorderBottom' : 'expandBorder') : '', 'showClick']">
														<div class="myflex" :class="[z.isExpand ? 'expandstyle' : '']">
															<div class="titleStyle">{{ z.insuranceClauseName }}</div>
															<div class="titleStyle">{{ z.benefitType }}</div>
															<div class="table_trBRo imgHeight"
																@click="z.isExpand = !z.isExpand">
																<img class="twentyImg" v-if="!z.isExpand"
																	src="../../assets/s.png" alt="">
																<img class="twentyImg" v-if="z.isExpand"
																	src="../../assets/x.png" alt="">
															</div>
														</div>
														<div v-if="z.isExpand" class="contentStyle">
															<div class="myflex">
																<div>团个性质</div>
																<div>{{ z.gpFlagStr || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>被保人</div>
																<div>{{ z.insured || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>主附险</div>
																<div>{{ z.mainproDuctFlag || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>生效日期</div>
																<div>{{ z.effDate || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>满期日期</div>
																<div>{{ z.endDate || '--' }}</div>
																<div></div>
															</div>
															<div class="myflex">
																<div>累计交费（元）</div>
																<div>{{ z.accPremium || '--' }}</div>
																<div></div>
															</div>
														</div>
													</div>

												</td>
											</tr>
										</template>
									</tbody>
								</table>
							</div>
						</van-tab>
					</van-tabs>
					<div v-if="reportType == 2 ? true : false">
						<div class="wxts4" v-if="onName == '1' ? true : false">
							<!-- <div>投保人表</div> -->
							<img class="wxtsImg3" src="../../assets/img/detailedVersion/wxts.png" alt="" />
							1.【被保⼈】栏显示为“其他”代表相关数据未知或缺失。
						</div>
						<div class="wxts4" v-if="onName == '0' ? true : false">
							<!-- <div style="margin-top:10px">被保人表</div> -->
							<img class="wxtsImg3" src="../../assets/img/detailedVersion/wxts.png" alt="" />
							1.【投保⼈】栏显示为“其他”代表相关数据未知或缺失。
							<br>
							2.标“※”的保单将在后续部分进⾏详细责任解读。
						</div>
					</div>
				</div>
			</div>
			<!-- 保障责任解读 -->
			<div class="content_comc" ref="responsibility">
				<div class="combTop">
					<img src="../../assets/img/detailedVersion/btp.png" alt="" />
					<div>保障责任解读</div>
				</div>
				<!-- 可解读条款列表 -->
				<div ref="responsibilityInterpretable" v-if="false">
					<div class="combCen1" @click="switchInterpretable(memorandumShow)" v-if="reportType != 1">
						<div>可解读条款列表</div>
						<!-- <img src="../../assets/img/detailedVersion/y.png" alt=""> -->
						<van-icon :name="memorandumShow ? 'eye-o' : 'closed-eye'" />
					</div>
					<div class="memorandum" v-if="memorandumShow && reportType != 1">
						<div class="comc_table1 overflow_margin ">
							<table border="1" class="table_t table_ttt margin_top_zero tableBorderColor">
								<thead class="table_d border_radius_zero">
									<tr class="border_radius_zero specialTableThBorder">
										<!-- <th style="border-radius: 0;">序号</th> -->
										<th class="fixedFirst fixedHeader" style="width: 25%">保单信息</th>
										<th>保障条款名称</th>
										<th v-if="b42PeruseFlag && decipherableFlage">操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item, index) in decipherableData" :key="index">
										<td class="baodanhao fixedFirst">
											<div>{{ item.policyNumber }}</div>
											<div v-if="item.companyName != '-'">{{ item.companyName }}</div>
										</td>
										<td class="fixedFirstNeighbor">
											<div v-for="(z, i) in item.b4DTOList" :key="i">
												{{ z.insuranceClauseName }}
												{{ z.clauseParsingFlag == '是' ? '※' : '' }}
											</div>
										</td>
										<!-- <td>{{ item.companyName }}</td> -->
										<td v-if="b42PeruseFlag && decipherableFlage" class="z"
											@click="godetailedVersionTk(item)">
											责任精读</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- 可解读条款列表 -->
				<div ref="responsibilityInterpretable">
					<div class="responsibilityComb" @click="switchInterpretable(memorandumShow)" v-if="reportType != 1">
						<div class="centered">可解读条款列表</div>
						<div class="right"><van-icon :name="memorandumShow ? 'eye-o' : 'closed-eye'" /></div>
					</div>
					<div class="comc_table">
						<div v-if="!memorandumShow" class="responsibilityHeader">
							<span>保单信息</span>
							<span>保障条款名称</span>
							<span v-if="b42PeruseFlag && decipherableFlage">操作</span>
						</div>
						<table border="1" class="table_t tableBorderColor" v-if="memorandumShow && reportType != 1">
							<thead class="table_d">
								<tr>
									<th class="fixedFirst fixedHeader" style="width: 25%">保单信息</th>
									<th>保障条款名称</th>
									<th v-if="b42PeruseFlag && decipherableFlage">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item, index) in decipherableData" :key="index">
									<td class="baodanhao fixedFirst">
										<div>{{ item.policyNumber }}</div>
										<div v-if="item.companyName != '-'">{{ item.companyName }}</div>
									</td>
									<td class="fixedFirstNeighbor">
										<div v-for="(z, i) in item.b4DTOList" :key="i">
											{{ z.insuranceClauseName }}
											{{ z.clauseParsingFlag == '是' ? '※' : '' }}
										</div>
									</td>
									<td v-if="b42PeruseFlag && decipherableFlage" class="z"
										@click="godetailedVersionTk(item)">
										责任精读</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div ref="responsibilityOverview">
					<div class="combCen">
						<span>保障责任一览</span>
					</div>
					<div class="pieChartView1">
						<!-- 表格 -->
						<div class="comc_table">
							<table border="1" class="table_t tableBorderColor">
								<thead class="table_d">
									<tr>
										<th>保障责任</th>
										<th>
											<div>保障金额(万元)</div>
											<div>含区间</div>
										</th>
									</tr>
								</thead>
								<tbody>
									<template v-for="(item, index) in listbzzr.slice(
										0,
										3
									)" :key="index">
										<tr class="table_tr">
											<td>
												{{ item.firstBilityName }}
											</td>
											<td v-if="
												item.minProtectionAmount ==
												item.maxProtectionAmount
											">
												{{ item.maxProtectionAmount }}
											</td>
											<td v-else>
												{{ item.minProtectionAmount }} -
												{{ item.maxProtectionAmount }}
											</td>
										</tr>
									</template>
									<template v-for="(item, index) in listbzzr.slice(
										3,
										6
									)" :key="index">
										<tr class="table_tr">
											<td>
												{{ item.firstBilityName }}
											</td>
											<td v-if="
												item.minProtectionAmount ==
												'0.00' &&
												item.maxProtectionAmount ==
												'0.00'
											">
												{{ item.maxProtectionAmount }}
											</td>
											<td v-else-if="
												item.maxProtectionAmount ==
												'0.00'
											">
												{{ item.minProtectionAmount }}
											</td>
											<td v-else>
												{{ item.maxProtectionAmount }}
											</td>
										</tr>
									</template>
								</tbody>
							</table>
						</div>
					</div>
					<div class="wxts5">
						<img class="wxtsImg5" src="../../assets/img/detailedVersion/wxts.png" alt="" />
						1.保障区间最大值指在该项责任大类中触发某一特殊条件时，能够获赔的最大金额。<br />
						2.生存金对应保障责任金额是指您所持有保单下一次可获得的生存金额总和。
					</div>
				</div>
				<!-- 保单表格 -->
				<div ref="responsibilityDistribution">
					<div class="comc_table">
						<div class="table_tit">保障责任分布情况</div>
						<table border="1" class="table_t tableBorderColor">
							<thead class="table_d">
								<tr>
									<th>一级责任</th>
									<th>二级责任</th>
									<th class="tbh" colspan="2">
										<span>保障责任</span><span>(元)</span>
									</th>
								</tr>
							</thead>
							<tbody>
								<template v-for="(item, index) in list" v-if="list.length !== 0" :key="index">
									<tr v-for="(items, indexs) in item.data" :key="indexs" class="table_tr">
										<td v-if="indexs === 0" :rowspan="item.data.length">
											{{ item.firstBilityName }}
										</td>
										<td>
											{{ items.secondBilityName }}
										</td>
										<td style="padding-left: 2px;padding-right: 2px ;">
											{{ items.protectionAmount }}
										</td>
										<td v-if="indexs === 0 && reportType == 2" :rowspan="item.data.length"
											class="read">
											<span v-if="
												getProtectionAmountAll(
													item.data
												) != 0
											" class="blue_size" @click="
												goDetailedVersionread(
													item.firstBilityCode,
													item.firstBilityName
												)
												">保障责任精读</span>
											<span v-else class="rgb_size">保障责任精读</span>
										</td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>
					<div class="height_thirty"></div>
				</div>
			</div>

			<!-- 费用筹划 -->
			<div class="content_comc content_comcbbxrBwl" ref="costPlanning">
				<div class="combTop">
					<img src="../../assets/img/detailedVersion/btp.png" alt="" />
					<div>费用筹划</div>
				</div>
				<div class="comc_table comc_tablebbxr">
					<div class="table_tit">缴费备忘录</div>
					<table border="1" class="table_t jfTableStyle" style="border-color: #DEDEDE  !important;">
						<thead class="table_d table_dbbxr ">
							<tr>
								<th class='bbxrTh' style="width: 30%;">月份</th>
								<th style="width: 45%;">月度保费汇总(元)</th>
								<th style="width: 25%;">详情</th>
							</tr>
						</thead>
						<tbody>
							<template v-for="(item, index) in monthPremium" :key="index">
								<tr class="table_tr">
									<td colspan="3"
										:class="[item.isExpand ? index == 0 ? 'expandBorderBottom' : (index > 0 && monthPremium[index - 1].isExpand ? 'expandBorderBottom' : 'expandBorder') : '']">
										<div :class="['jftdTitle', item.isExpand ? 'cntentTitle' : '']">
											<div style="flex: 30;">{{ item.month }}</div>
											<div style="flex: 50;">{{ item.premiumPayableCot }}</div>
											<div style="flex: 20;" @click="item.isExpand = !item.isExpand">
												<img class="twentyImg imgStyle" v-if="!item.isExpand"
													src="../../assets/s.png" alt="">
												<img class="twentyImg imgStyle" v-if="item.isExpand"
													src="../../assets/x.png" alt="">
											</div>

										</div>
										<template v-if="item.isExpand">
											<div class="contentStyle"
												style="display: flex;min-height: 30px;line-height: 30px;">
												<div>保单号</div>
												<div>保险公司名称</div>
												<div>
													保费金额(元)
												</div>
											</div>
											<div class="contentItem"
												style="display: flex;min-height: 30px;line-height: 30px;"
												v-for="(z, i) in item.data" :key="i">
												<div>{{ z.policyNo }}</div>
												<div>{{ z.companyName }}</div>
												<div @click="item.isExpand = !item.isExpand">
													{{ z.premiumPayable }}
												</div>
											</div>

										</template>

									</td>
								</tr>
							</template>
						</tbody>
					</table>
				</div>
				<div class="wxts6">
					<img class="wxtsImg6" src="../../assets/img/detailedVersion/wxts.png" alt="" />
					<div>
						1.不包含产品续保缴费情况，当前月份对应保费金额不包含当月已缴纳保费。
					</div>
					<div>2.未来缴费金额数值取对应保单最近一次缴费金额。</div>
				</div>
				<div class="height_thirty"></div>
			</div>

			<!-- 未来年度缴费水平 -->
			<div ref="futureAnnualPaymentLevel">
				<div class="content_comc" v-show="reportType == 2 ? true : false">
					<div class="combTop">
						<img src="../../assets/img/detailedVersion/btp.png" alt="" />
						<div>未来年度缴费水平</div>
					</div>
					<van-tabs type="card" animated v-model:active="yearActiveName" v-if="reportType == 2 ? true : false"
						@click-tab="onClickTabFurter">
						<van-tab title="曲线" name="a">
							<div class="memorandum">
								<!-- <div class="table_tit">曲线</div> -->
								<div class="tableEchart" :key="forceUpdateKey">
									<EchartsLine class="pieLine" :colorS="colorS" :titleData="yearPremium">
									</EchartsLine>
								</div>
							</div>
						</van-tab>
						<van-tab title="表格" name="b">
							<!-- 未来年度缴费明细 -->
							<div class="memorandum">
								<!-- <div class="table_tit">明细</div> -->
								<div class="comc_table1 yearDetail">
									<table border="1" class="table_t table_Wl width_margin tableBorderColor">
										<thead class="table_d">
											<tr>
												<th>年度</th>
												<th>保费（元）</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(item, index) in yearPremium" :key="index">
												<td v-if="item.premiumPayable != 0">
													{{ item.year }}
												</td>
												<td v-if="item.premiumPayable != 0">
													{{ item.premiumPayable }}
												</td>
											</tr>
											<tr v-if="yearPremium.every((r: any) => r.premiumPayable == 0)">
												<td></td>
												<td></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</van-tab>
					</van-tabs>
					<div class="wxts7 wxtsf" v-show="reportType == 2 ? true : false">
						<img class="wxtsImg6" src="../../assets/img/detailedVersion/wxts.png" alt="" />
						<div>
							1.不包含产品续保缴费情况，当前年度对应保费不包含当年已缴纳保费。
						</div>
						<div>2.未来缴费金额数值取对应保单最近一次缴费金额。</div>
					</div>
					<div class="height_thirty"></div>
				</div>
			</div>

			<!-- 客户权益 -->
			<div class="content_comc content_comcz content_comcbbxrJz" ref="otherCustomerRights">
				<div class="combTop">
					<img src="../../assets/img/detailedVersion/btp.png" alt="" />
					<div>其他客户权益</div>
				</div>
				<!-- 权益解读 -->
				<div class="memorandum" ref="otherCustomerRightsEquity" v-show="reportType == 2 ? true : false">
					<div class="table_tit">价值解读</div>
					<div class="wxts7 margin_top_ten">
						保单现金价值是指储蓄性质人身险保单所具有的价值，对应保单解约或退保时保险公司可返还的金额。
						有现金价值的保单往往可提供贷款服务，作为您应急资金来源之一。
					</div>
					<div class="comc_table comc_tablebbxr">
						<table border="1" class="table_t tableBorderColor">
							<thead class="table_d table_dbbxr">
								<tr>
									<th class='bbxrTh'>保单信息</th>
									<th style="width: 35%;">保障条款名称</th>
									<th style="width: 30%;transform: translateX(-5%);">险种类型</th>
									<th style="width: 13%;">详情</th>
								</tr>
							</thead>
							<tbody>
								<template v-for="(item, index) in currentEquity" :key="index">
									<tr class="table_tr">
										<td>
											<div>{{ item.policyNo }}</div>
											<div>{{ item.companyName }}</div>
										</td>
										<td colspan="3">
											<div v-for="(z, i) in item.e1DTOS" :key="i"
												:class="[z.isExpand ? i == 0 ? 'expandBorderBottom' : (i >= 1 && item.e1DTOS[i - 1].isExpand ? 'expandBorderBottom' : 'expandBorder') : '', 'showClick']">
												<div class="myflex" :class="[z.isExpand ? 'expandstyle' : '']">
													<div class="titleStyle">{{ z.insuranceClauseName }}</div>
													<div class="titleStyle">{{ z.benefitType }}</div>
													<div class="table_trBRo imgHeight"
														@click="z.isExpand = !z.isExpand">
														<img class="twentyImg" v-if="!z.isExpand"
															src="../../assets/s.png" alt="">
														<img class="twentyImg" v-if="z.isExpand"
															src="../../assets/x.png" alt="">
													</div>
												</div>
												<div v-if="z.isExpand" class="contentStyle">
													<div class="myflex">
														<div>生效日期</div>
														<div>{{ z.effDate || '--' }}</div>
													</div>
													<div class="myflex">
														<div>满期日期</div>
														<div>{{ z.endDate || '--' }}</div>
													</div>
													<div class="myflex">
														<div>累计交费（元）</div>
														<div>{{ z.premiumPaid || '--' }}</div>
													</div>
													<div class="myflex">
														<div>现金价值（元）</div>
														<div>{{ z.cashValue || '--' }}</div>
													</div>
													<div class="myflex">
														<div>账户价值（元）</div>
														<div>{{ z.accountValue || '--' }}</div>
													</div>
													<div class="myflex">
														<div>累计红利（元）</div>
														<div>{{ z.cumulativeBonusAmount || '--' }}</div>
													</div>
													<div class="myflex">
														<div>贷款、借款权益（元）</div>
														<div>{{ z.sfkybdjkDk || '--' }}</div>
													</div>
													<div class="myflex">
														<div>主附险</div>
														<div>{{ z.risksType || '--' }}</div>
													</div>
												</div>
											</div>
										</td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>
				</div>
				<div class="memorandum" ref="otherCustomerRightsBeneficiary" v-show="reportType == 2 ? true : false">
					<div class="table_tit">
						<span>保单受益人列表</span><span>(仅展示含有身故责任保单)</span>
					</div>
					<div class="wxts7 margin_top_twenty">
						保险受益人是指人身保险中，接受保险合同利益的人。为保证您的保障意图顺利实现，减少理赔纠纷，
						建议您就包含身故责任的保单指定受益人并明确分配比例。
					</div>
					<div class="comc_table comc_tablebbxr">
						<table border="1" class="table_t tableBorderColor">
							<thead class="table_d table_dbbxr">
								<tr>
									<th class='bbxrTh'>保单信息</th>
									<th style="width: 30%;">保障条款名称</th>
									<th style="width: 30%;transform: translateX(-5%);">受益人</th>
									<th style="width: 15%;">详情</th>
								</tr>
							</thead>
							<tbody>
								<template v-for="(item, index) in benefitInfo" :key="index">
									<tr class="table_tr">
										<td>
											<div>{{ item.policyNo }}</div>
											<div>{{ item.companyName }}</div>
										</td>
										<td colspan="3">
											<div v-for="(z, i) in item.e2DTOS" :key="i"
												:class="[z.isExpand ? i == 0 ? 'expandBorderBottom' : (i > 0 && item.e2DTOS[i - 1].isExpand ? 'expandBorderBottom' : 'expandBorder') : '', 'showClick']">
												<div class="myflex" :class="[z.isExpand ? 'expandstyle' : '']">
													<div class="titleStyle">{{ z.insuranceClauseName }}</div>
													<!-- <div class="titleStyle">{{ z.benefitType }}</div> -->
													<div class="titleStyle">{{ z.syr }}</div>
													<div class="table_trBRo imgHeight"
														@click="z.isExpand = !z.isExpand">
														<img class="twentyImg" v-if="!z.isExpand"
															src="../../assets/s.png" alt="">
														<img class="twentyImg" v-if="z.isExpand"
															src="../../assets/x.png" alt="">
													</div>
												</div>
												<div v-if="z.isExpand" class="contentStyle">
													<div class="myflex">
														<div>险种类型</div>
														<div>{{ z.benefitType || '--' }}</div>
														<div></div>
													</div>
													<div class="myflex">
														<div>投保人姓名</div>
														<div>{{ z.insurerName || '--' }}</div>
														<div></div>
													</div>
													<div class="myflex">
														<div>被保人姓名</div>
														<div>{{ z.insuredName || '--' }}</div>
														<div></div>
													</div>
													<div class="myflex">
														<div>生效日期</div>
														<div>{{ z.effDate || '--' }}</div>
														<div></div>
													</div>
													<div class="myflex">
														<div>满期日期</div>
														<div>{{ z.endDate || '--' }}</div>
														<div></div>
													</div>
													<div class="myflex">
														<div>主附险</div>
														<div>{{ z.risksType || '--' }}</div>
														<div></div>
													</div>
													<!-- <div class="myflex">
																<div>是否有身故责任</div>
																		<div> {{
																		z.sfbksgzr == '*'
																		? '是'
																		: z.sfbksgzr
																	}}</div>
																<div></div>
															</div> -->
													<!-- <div class="myflex">
																<div>受益人</div>
																<div>{{z.syr || '--'}}</div>
																<div></div>
															</div> -->
												</div>
											</div>
										</td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>
				</div>
				<div ref="otherCustomerRightsGlaimasGuidelines">
					<div class="comcz_zy margin_top_rem">理赔指引</div>
					<div class="lpzy">
						在风险事件发生时，保险公司会按照合同约定提供理赔服务。为帮助您更好理解和处理保险理赔事宜，
						此处对理赔时需要准备及提供的一些材料进行了整理并列明，具体要求还请以保险公司方为准。
					</div>
					<div class="comce_yb text_indent_one">一般材料</div>
					<div class="comc_text">
						<table style="width: 89%">
							<tbody class="lightColour">
								<tr v-for="(item, index) in sss" :key="index">
									<td class="td_Style">
										<span class="td_Style_span">{{ index + 1 }}.</span>
										{{ item }}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="comce_yb">
						如遭遇下列出险情况，除以上的一般通用材料外，您还需要准备：
					</div>
					<div class="comc_text">
						<table style="width: 89%">
							<tbody class="lightColour">
								<tr v-for="(item, index) in material.specialMaterial" :key="index">
									<td class="td_Style_two">
										{{ item.type }}
									</td>
									<td class="td_Style_td">
										{{ item.explain }}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="height_thirty"></div>
				</div>
			</div>
		</div>
		<!-- 底部按钮 -->
		<div class="bottomnPecton" v-if="reportSaveFlag == 0">
			<div @click="codePopShow(1)" v-log-button-name="jstflage ? '保单检视_报告详情2_重新选择检视范围' : '保单检视_报告详情_重新选择检视范围'">
				重新选择检视范围</div>
			<div @click="codePopShow(2)" v-log-button-name="jstflage ? '保单检视_报告详情2_保存报告' : '保单检视_报告详情_保存报告'"
				ref="animatedButton">
				保存报告</div>
		</div>
	</div>
	<!-- <div class="output" @click="printReport">导出此报告</div> -->
	<!-- 重新检视 -->
	<pop @send-message="sendMessageCx" v-if="popShowCx">
		<template v-slot:header>
			<p>{{ messageCx }}</p>
		</template>
	</pop>
	<!-- 保存 -->
	<pop @send-message="sendMessageBu" v-if="popShowBu">
		<template v-slot:header>
			<p>{{ messageBu }}</p>
		</template>
	</pop>
	<!-- 返回 -->
	<pop @send-message="sendMessageFh" :qxtext="'退出'" :qdtext="'去保存'" v-if="popShowFh">
		<template v-slot:header>
			<p>{{ messageFh }}</p>
		</template>
	</pop>
	<!-- 三级责任 -->
	<ChildComponent :obj='obj' @sendParent="sendParent" v-if="detailedVersionreadShow"></ChildComponent>
	<!-- 三级解读 -->
	<detailedVersionTk :obj='obj1' @sendParent1="sendParent1" v-if="godetailedVersionTkShow"></detailedVersionTk>
</template>
<!-- less嵌套设置 -->
<style lang="less" scoped>
@import '../../assets/css/detailedVersion.less';
</style>

<script lang="ts" setup name="addCustomers">
import { reportBuryinigPointStrore } from "/@/stores/reportBuringPoint"
import { onMounted, onUnmounted, ref, reactive, nextTick } from 'vue'
import { Toast } from '/@/utils/Message'
import { useRouter, useRoute } from 'vue-router'
import {
	getReportData,
	getDetailReadIsCode,
	letterControllerjstUrl,
	reportSave,
	jstJointLogin
} from '/@/api/auth/simpleVersion.ts'
import { createCustomMark } from '/@/api/auth/repot'
import { JIAMIPublicData, JIMIPublicData } from '/@/utils/encrypt_sm2'
import customNavBar from '/src/components/NavBar/customNavBar.vue'
import echartsPie from '/src/components/Echarts/echartsPie.vue'
import echartsBar from '/src/components/Echarts/echartsBar.vue'
import EchartsLine from '/src/components/Echarts/echartsLine.vue'
import { log } from 'console'
import { sm2 } from 'sm-crypto'
import pop from '/src/components/popFrame/index.vue'
import ChildComponent from '/src/views/Task/detailedVersionread.vue'
import detailedVersionTk from '/src/views/Task/detailedVersionTk.vue'
import { interactive } from "/@/assets/js/interactive"
import { dresponsedata } from "./data"
import useClipboard from "vue-clipboard3";
const stores = reportBuryinigPointStrore()
// import htmlToPdf from "./htmlToPDF";
const printReport = () => {
	htmlToPdf.getPdf('报告详情', "#page");
}
const jstflage = sessionStorage.getItem('jstJointLoginVo')
let obj = reactive({})
let detailedVersionreadShow = ref(false)
const sendParent = (v: any) => {
	detailedVersionreadShow.value = v
	stores.specialColsePop("保障责任分布情况二级")
};
let obj1 = reactive({})
let godetailedVersionTkShow = ref(false)
const sendParent1 = (v: any) => {
	godetailedVersionTkShow.value = v
	stores.specialColsePop("可解读条款二级")
};
const godetailedVersionTk = (v: any) => {
	obj1 = {
		policyNumber: v.policyNumber,
		companyName: v.companyName,
		insuranceClauseName: v.insuranceClauseName,
		taskCode: route.query.taskCode,
		userType: route.query.userType,
		face: route.query.face,
		isYsc: route.query.isYsc ? route.query.isYsc : 0,
		token: route.query.token ? route.query.token : "",
	}
	godetailedVersionTkShow.value = v

	// 可解读条款列表的弹窗埋点事件事件
	stores.sendThreeEvent("可解读条款列表弹窗")
};
//公钥串---加密使用
const publicKey = ref<string>(
	'044291b381a039a8d7d02d7272d2d7c78a30d33e3eeaa0b509bf77d2376582ab2d573730e6bfe9a53bad53f53ac1a85d9c11050931f04bc8b3afc04144d5a6f9be'
)
//私钥串---解密使用
const privateKey = ref<string>(
	'5aa03412c3051e1d4cf9d19cfbeeec70c28f388c9f82747cc912096c9cd44bea'
)
// 加密方法
const JIAMIPublicData = (data: any): string => {
	const cipherMode = 1
	const result = sm2.doEncrypt(data, publicKey.value, cipherMode)
	return `04${result}`
}
// 解密方法
const JIMIPublicData = (data: any): string => {
	const cipherMode = 1
	//data为加密的数据
	const result = sm2.doDecrypt(
		data?.substring(2),
		privateKey.value,
		cipherMode
	)
	return result
}
const router = useRouter()
const route = useRoute()
const leftTetx = ref('')
const memorandumShow = ref(true)
let resData = reactive({})
let showOverlay = ref(true)
const getBooleanFromSessionStorage = (key: any) => {
	const value = sessionStorage.getItem(key)
	return value === 'true'
}
if (sessionStorage.getItem('showOverlay')) {
	showOverlay.value = getBooleanFromSessionStorage('showOverlay')
	if (showOverlay.value) {
		stores.sendOneEvent("温馨提示")
	}
}
const state: {
	resData: any
	echartsData: any[]
	barData: any[]
	barDatas: any[]
	titleData: any[]
} = reactive({
	resData: {},
	echartsData: [],
	barData: [],
	barDatas: [],
	titleData: [],
})
let reportCreateTime: any[] = reactive([]) //报告生成日期
let apptableData: any[] = reactive([]) //被保人保单数据
let decipherableData: any[] = reactive([]) //可解读列表数据
let decipherableDatanoData: any[] = reactive([{
	policyNumber: '-',
	companyName: '-',
	b4DTOList: [{
		insuranceClauseName: '-',
		clauseParsingFlag: '否'
	}]
}]) //可解读列表无数据
let decipherableFlage = ref(false)  //根据可解读列表是否有数据进行判断，用于可解读列表操作类的展示
let insuredtableData: any[] = reactive([]) //被保人保单数据
let titleData: any[] = reactive([]) //柱状图数据
let barData: any = reactive([]) //柱状图数据
let material: any = reactive({}) //理赔指引
let currentEquity: any = reactive([]) //理赔指引
let benefitInfo: any = reactive([]) //受益人信息
let yearPremium: any = reactive([]) //年度保费
let monthPremium: any = reactive([]) //月度保费
let twoDistribution: any = reactive([]) //保单责任二级分布情况
let taskCode: string | undefined | number = undefined
let face: any = undefined
let reportType: string | undefined | number = undefined
let reportCode: string | undefined | number = undefined
let taskId: string | undefined | number = undefined
let taskCodes = ref('')
const titleTest = ref('检视报告')
const colorS = ref(['rgba(89, 124, 239, 1)', 'rgba(105, 166, 247, 1)', 'rgba(250, 222, 113, 1)', 'rgba(247, 145, 66, 1)'])
const data = ref([])
const active = ref('commodity')
const isLoad = ref(false)
const activeName = ref('0')
let yearActiveName = ref('a') //年度保费切换
let sss = reactive([])
let onName = ref('0')
const list = ref([])
const listbzzr = ref([])
const popShowCx = ref(false)
const popShowBu = ref(false)
const popShowFh = ref(false)
const b42PeruseFlag = ref(false)
const messageCx =
	'您确定要重新选择检视的保单范围吗?如您重新选择检视范围，此报告将被覆盖，后续您将无法查看。'
const messageBu =
	'保存后,本报告可在线查看有效期延长30天,检视范围无法重新选择。请问是否确定保存?'
const messageFh =
	'您尚未保存报告,此链接即将过期，保存后此链接有效期将延长30天，您是否确认保存。'
const reportSaveFlag: any = ref('1')
let onClickTab = ({ name }: any) => {
	// 保单梳理模块   被保人和投保人切换，引起页面高度发生而改变，
	// 需要重新获取页面高度，并且调用对应的二级模块埋点调用事件
	onName.value = name
	// 动态更新保单梳理模块现在展示的是被保人还是投保人模块
	stores.distinguishInsuredAndPolicyholder = name
	nextTick(() => {
		setTimeout(() => {
			stores.getElementHeight(policySorting, "policySorting", 1)	//保单梳理模块
			stores.getElementHeight(policySortingInsured, "policySortingInsured", 2)	//保单梳理-被保人模块   这块根据选择的是那块进行调佣，需要进行细化
			// stores.getElementHeight(policySortingPolicyholder,"policySortingPolicyholder",2)	//保单梳理-投保人模块
		}, 100)
	})
	// 需要根据name的不同，唤起不同的埋点事件
	if (name == 0) {
		// 被保人二级模块
		// 保证切换事件调用的二级埋点正确
		stores.specialSwitchEvent("被保人切换")
		// 保证滚动事件调用的二级埋点正确
		stores.distinguishInsuredAndPolicyholder = 1
	} else {
		// 投保人二级模块
		stores.specialSwitchEvent("投保人切换")
		// 更新对应的二级模块
		stores.distinguishInsuredAndPolicyholder = 2
	}
	nextTick(() => {
		// 确定页面更新完成后进行高度获取 因为中间模块高度修改   后续高度都需要进行范围修改
		setHeight()
		setLevelTwoHeight()
	})
}
// 未来年度缴费水平  曲线和表格的切换事件
// 因为是一级模块 不需要特殊请求,更新页面高度即可
const onClickTabFurter = ({ name }: any) => {
	nextTick(() => {
		setTimeout(() => {
			stores.getElementHeight(futureAnnualPaymentLevel, "futureAnnualPaymentLevel", 1)	//未来年度缴费水平
		}, 100)
	})


}
const switchInterpretable = (res: boolean) => {
	memorandumShow.value = !res
	stores.specialSwitchEvent("可解读条款 隐藏显示切换")
	// 并且修改对应的一级二级模块的高度
	nextTick(() => {
		// 确定页面更新完成后进行高度获取 因为中间模块高度修改   后续高度都需要进行范围修改
		setHeight()
		setLevelTwoHeight()
	})

}


// 被保人
const bbrClick = (v: any, value: any, z: any) => {
	v.isExpand = !v.isExpand
	value.isExpand = !value.isExpand
	console.log(z)
}
const gotop = (v: any) => {
	if (reportSaveFlag.value == 0) {
		popShowFh.value = true
	} else {
		if (route.query.isYQX == '1' || route.query.face) {
			window.history.go(-1)
		} else {
			// Toast('返回上一页面')
			router.go(-1)
		}
	}
}

const textValue = ref<string>('');
const { toClipboard } = useClipboard();
const copyReportCode = async (val: any) => {
	try {
		textValue.value = val
		await toClipboard(textValue.value);
		Toast("复制成功");
	} catch (e: any) {
		Toast(e);
	}
};

//根据屏幕是否横竖方向改变  重新渲染canvas部分画面  主要用于适配
const screenOrientation = ref<'portrait' | 'landscape'>('portrait');
const forceUpdateKey = ref(0);
const updateScreenOrientation = () => {
	let oldValue = screenOrientation.value
	if (window.innerWidth > window.innerHeight) {
		screenOrientation.value = 'landscape';
	} else {
		screenOrientation.value = 'portrait';
	}
	if (oldValue != screenOrientation.value) {
		forceUpdateKey.value += 1; // 通过更改值来触发重新渲染 
	}

};

const myHeight = ref<any>('')

onMounted(() => {
	myHeight.value = sessionStorage.getItem("jstHeaderHeight") ? JSON.parse(sessionStorage.getItem("jstHeaderHeight")) : ''

	// 监听页面翻转的改变事件
	window.addEventListener('resize', updateScreenOrientation);
	// 初始化屏幕方向  
	updateScreenOrientation();



	taskCode = route.query.taskCode as string
	reportType = (route.query.reportType as string) || '1'
	taskId = (route.query.taskId as string) || '1'
	face = route.query.face
	// if (face) {
	// 	let custoken = sessionStorage.getItem('customToken')
	// 	if (!custoken) {
	// 		// face表示从金事通进来的 !custoken表示没有获取过的
	// 		createCustomMark({ taskCode: route.query.taskCode }).then(
	// 			(rest: any) => {
	// 				if (rest.code == 200) {
	// 					sessionStorage.removeItem('customToken')
	// 					sessionStorage.setItem('customToken', rest.customToken)
	// 				}
	// 			}
	// 		)
	// 	} else {
	// 		console.log('已经存在')
	// 	}
	// }
	setTimeout(() => {
		getReportDatas()
	}, 700)
	window.addEventListener('scroll', handleScroll, true)
	nextTick(() => {
		stores.isDetailVersion = true
		stores.resetMyStoreData()
		setHeight()
		setLevelTwoHeight()
	})
})
onUnmounted(() => {
	window.removeEventListener('scroll', handleScroll)
	// 在退出详情页时，设置详情页面的阀门为fasle,控制其他页面滚动事件引起其他页面埋点的发送
	stores.isDetailVersion = false
	// 在组件卸载时移除事件监听器 
	window.removeEventListener('resize', updateScreenOrientation);
})
// 滚动事件
const BasedPerson = ref(null)
const policySorting = ref(null)
const policySortingSummary = ref(null)
const policySortingInsured = ref(null)
// const policySortingPolicyholder = ref(null)
const responsibility = ref(null)
const responsibilityInterpretable = ref(null)
const responsibilityOverview = ref(null)
const responsibilityDistribution = ref(null)
const costPlanning = ref(null)
const futureAnnualPaymentLevel = ref(null)
const otherCustomerRights = ref(null)
const otherCustomerRightsEquity = ref(null)
const otherCustomerRightsBeneficiary = ref(null)
const otherCustomerRightsGlaimasGuidelines = ref(null)

const virtualLine = ref()

// 注意 所有会引起页面高度修改的地方，都需要重新获取高度
const setHeight = () => {
	setTimeout(() => {
		nextTick(() => {
			stores.getElementHeight(virtualLine, "virtualLine", 1)	  //线的高度
			stores.getElementHeight(BasedPerson, "BasedPerson", 1)	  //基本信息模块
			stores.getElementHeight(policySorting, "policySorting", 1)	//保单梳理模块
			stores.getElementHeight(responsibility, "responsibility", 1)	//保障责任解读
			stores.getElementHeight(costPlanning, "costPlanning", 1)	//费用筹划
			stores.getElementHeight(futureAnnualPaymentLevel, "futureAnnualPaymentLevel", 1)	//未来年度缴费水平
			stores.getElementHeight(otherCustomerRights, "otherCustomerRights", 1)	//其他客户权益
		})
	}, 1000)
}
const setLevelTwoHeight = () => {
	setTimeout(() => {
		nextTick(() => {
			stores.getElementHeight(policySortingSummary, "policySortingSummary", 2)	//保单梳理-分布汇总模块
			stores.getElementHeight(policySortingInsured, "policySortingInsured", 2)	//保单梳理-被保人模块   这块根据选择的是那块进行调佣，需要进行细化
			// stores.getElementHeight(policySortingPolicyholder,"policySortingPolicyholder",2)	//保单梳理-投保人模块
			stores.getElementHeight(responsibilityInterpretable, "responsibilityInterpretable", 2)	//保障责任解读-可解读条款列表
			stores.getElementHeight(responsibilityOverview, "responsibilityOverview", 2)	//保障责任解读-保障责任一览
			stores.getElementHeight(responsibilityDistribution, "responsibilityDistribution", 2)	//保障责任解读-保障责任分布情况
			stores.getElementHeight(otherCustomerRightsEquity, "otherCustomerRightsEquity", 2)	//其他客户权益-价值解读
			stores.getElementHeight(otherCustomerRightsBeneficiary, "otherCustomerRightsBeneficiary", 2)	//其他客户权益-保单受益人列表
			stores.getElementHeight(otherCustomerRightsGlaimasGuidelines, "otherCustomerRightsGlaimasGuidelines", 2)	//其他客户权益-理赔指引
		})
	}, 1000)
}
// 关闭温馨提示的弹窗
const closeTopTitle = () => {
	showOverlay.value = false
	// 在关闭温馨提示弹窗时，需要同时调用一级模块的基本信息模块
	// 因为基本信息模块的高度肯定大于250,所以传一个肯定在基本信息内部的滚动数据
	stores.handleScrollEvent(-100)
}
const handleScroll = (event: any) => {
	const scrollNm = parseInt(event.target.scrollTop)
	stores.throttledHandleScroll(scrollNm)
	//当滚动时设置 上卷高度  主要用于页面元素发省改变时  重新设置range数据的正确
	stores.scrollTop = scrollNm
}
const codePopShow = (v: any) => {
	if (v == 1) {
		popShowCx.value = true
	} else if (v == 2) {
		popShowBu.value = true
	}
}
// 重新检视
const sendMessageCx = (v: any) => {
	if (v == 0) {
		popShowCx.value = false
	} else {
		router.push({
			name: 'reviewList',
			query: {
				taskCode: route.query.taskCode,
			},
		})
	}
}
// 报告保存
const sendMessageBu = (v: any) => {
	if (v == 0) {
		popShowBu.value = false
	} else {
		reportSave({
			taskCode: route.query.taskCode,
		}).then((res: any) => {
			// Toast(res.msg)
			popShowBu.value = false
			if (res.code == 200) {
				if (sessionStorage.getItem('JSTFLAG')) {
					//  适用于金世通嵌套
					router.push({ path: '/jstTask', query: { type: 0 } })
				} else {
					router.push({
						name: 'reportingResultybc',
						query: {
							taskCode: route.query.taskCode,
							reportType: route.query.reportType,
							userType: route.query.userType,
							face: route.query.face,
							isYsc: route.query.isYsc ? route.query.isYsc : 0,
						},
					})
				}
			}
		})
	}
}
// 返回按钮
const animatedButton = ref<HTMLButtonElement | null>(null);
const sendMessageFh = (v: any) => {
	if (v == 1) {
		popShowFh.value = false
		//此时给保存报告按钮加上动画
		startAnimation()
	} else {
		router.go(-1)
	}
}

const startAnimation = () => {
	if (animatedButton.value) {
		// 添加动画类
		animatedButton.value.classList.add('animate-size');

		// 5秒后移除动画类
		setTimeout(() => {
			animatedButton.value?.classList.remove('animate-size');
		}, 5000);
	}
};

// TODO  三个页面过来的参数整理
let getReportDatas = () => {
	if (route.query.isYsc || face == 'true') {
		//TODO 从扫码链接来的 加res code==402跳金世同
		getDetailReadIsCode({
			taskCode: route.query.taskCode,
			reportType: route.query.reportType,
			// userType: route.query.userType ,
		}).then((res: any) => {
			if (res.code == '402') {
				if (face == 'true') {
					// 金世通来的掉联合登录
					jstJointLogin({ taskCode: route.query.taskCode, token: route.query.token }).then(
						(res: any) => {
							if (res.code == 200) {
								sessionStorage.removeItem('customToken')
								sessionStorage.setItem('customToken', res.customToken)
								getReportDatas()
							} else if (res.code == 40201) {
								// 退出登录并跳转登录页面
								sessionStorage.clear()
								interactive({
									method: "reLogin",
									data: {
										code: '901',
										msg: ''
									}
								})
								// //  去金世通返回链接
								// letterControllerjstUrl({}).then((a: any) => {
								// 	if (a.code == 200) {

								// 	// Toast('跳转金事通页面')
								// 	// window.location.href = `${a.jstUrl}`;
								// }
								// });
							}
						}
					)
				} else {
					router.push({
						name: 'authorization',
						query: {
							isShare: '01',
							face: route.query.face,
							isYsc: route.query.isYsc ? route.query.isYsc : 0,
							statusBar: 'true',
							navigator: 'true',
							taskNo: JIMIPublicData(route.query.taskCode),
						},
					})
				}
				return
			}
			reportSaveFlag.value = res.reportSaveFlag
			// Toast(res.msg)
			reportType = res.reportType
			state.resData = res.data
			reportCreateTime = res?.data?.reportCreateTime
			if (res.reportCode) {
				reportCode = JIMIPublicData(res.reportCode as string)
			}
			resData = res.data
			if (res.reportType == '2') {
				apptableData.push(...(res.data.b4 || [])); // 确保即使 res.data.b4 是 undefined，也不会抛出错误
				if (apptableData.length > 0) { // 检查数组是否包含元素
					apptableData.map(v => {
						if (v && v.b4DTOList) {
							v.b4DTOList.forEach((q: any) => {
								q.isexpand = false
							});
						}
					});
				}
				console.log(apptableData)
				const newList = res.data.b42.length ? res.data.b42 : decipherableDatanoData
				decipherableData.push(...newList)
				decipherableFlage.value = res.data.b42.length ? true : false
				b42PeruseFlag.value = res.data.b42PeruseFlag
				insuredtableData.push(...res.data.b5) //明细列表2
				if (insuredtableData.length > 0) {
					insuredtableData.map(v => {
						v.isexpand = false;
					});
				}
				yearPremium.push(...res.data.d2) //未来年度缴费曲线和表格
				currentEquity.push(...res.data.e1) //现价权益解读
				if (currentEquity) {
					currentEquity.forEach((v: any) => {
						if (v && v.e1DTOS) {
							v.e1DTOS.forEach((q: any) => {
								q.isexpand = false;
							});
						}
					});
				}
				benefitInfo.push(...res.data.e2) //保单受益人列表
				if (Array.isArray(benefitInfo)) {
					benefitInfo.forEach((v: any) => {
						if (v && v.e2DTOS) {
							v.e2DTOS.forEach((q: any) => {
								q.isexpand = false;
							});
						}
					});
				}
			}
			const { b3 } = res.data
			// const data = b3.risks.map((item: string, index: number) => {
			// 	return { value: b3.policyNumber[index], name: item }
			// }) //保单梳理分布汇总环形图数据
			let data = []
			if (Array.isArray(b3.risks) && Array.isArray(b3.policyNumber)) {
				data = b3.risks.map((item: any, index: any) => {
					return { value: b3.policyNumber[index], name: item };
				});
			}
			listbzzr.value = res.data.c1
			// state.barData.push(...res.data.c1.minProtectionAmount); //保单责任解读柱状图数据
			// state.barDatas.push(...res.data.c1.maxProtectionAmount.slice(0,3)); //保单责任解读柱状图数据
			// state.titleData.push(...res.data.c1.firstBilityName); //保单责任解读柱状图数据
			state.echartsData.push(...data)
			twoDistribution.push(...res.data.c2) //保单责任二级分布情况
			monthPremium.push(...res.data.d1) //缴费备忘录  按月
			if (Array.isArray(monthPremium)) {
				monthPremium.forEach((v: any) => {
					if (v && v.data) {
						v.data.forEach((q: any) => {
							q.isexpand = false;
						});
					}
				});
			}
			material = Object.assign(material, res.data.e3) //理赔指引数据
			sss = material.generalMaterial.split('<br/>')
			list.value = res.data.c2
			taskCodes = res.taskCode
		})
	} else {
		// 消费者列表和从业人员
		getReportData({
			//  taskCode:JIAMIPublicData("000021202401021146547503"),
			taskCode: route.query.taskCode,
			reportType: route.query.reportType,
			userType: route.query.userType,
		}).then((res: any) => {
			console.log(res, "*****************");
			// 模拟数据
			// res = dresponsedata
			if (res.code == '402') {
				// Toast("请联系管理员"); // ? 还是去金事通
				router.push({
					name: 'authorization',
					query: {
						isShare: '01',
						face: route.query.face,
						isYsc: route.query.isYsc ? route.query.isYsc : 0,
						statusBar: 'true',
						navigator: 'true',
						taskNo: JIMIPublicData(route.query.taskCode),
					},
				})
				return
			}
			state.resData = res.data
			reportCreateTime = res?.data?.reportCreateTime
			if (res.reportCode) {
				reportCode = JIMIPublicData(res.reportCode as string)
			}
			resData = res.data
			reportSaveFlag.value = res.reportSaveFlag
			if (reportType == '2') {
				apptableData.push(...res.data.b4) //明细列表1
				if (Array.isArray(apptableData)) {
					apptableData.forEach(v => {
						if (v && v.b4DTOList) {
							v.b4DTOList.forEach((q: any) => {
								q.isexpand = false;
							});
						}
					});
				}
				const newList = res.data.b42.length ? res.data.b42 : decipherableDatanoData
				decipherableData.push(...newList)
				decipherableFlage.value = res.data.b42.length ? true : false   //根绝可解读列表的数据进行维护是否展示操作列
				b42PeruseFlag.value = res.data.b42PeruseFlag
				insuredtableData.push(...res.data.b5) //明细列表2
				if (insuredtableData && insuredtableData.length > 0) {
					insuredtableData.forEach(v => {
						v.isexpand = false;
					});
				}
				yearPremium.push(...res.data.d2) //未来年度缴费曲线和表格
				currentEquity.push(...res.data.e1) //现价权益解读
				if (currentEquity && currentEquity.length > 0) {
					currentEquity.forEach((v: any) => {
						if (v.e1DTOS) {
							v.e1DTOS.forEach((q: any) => {
								q.isexpand = false;
							});
						}
					});
				}
				benefitInfo.push(...res.data.e2) //保单受益人列表
				if (benefitInfo && benefitInfo.length > 0) {
					benefitInfo.forEach((v: any) => {
						if (v.e2DTOS) {
							v.e2DTOS.forEach((q: any) => {
								q.isexpand = false;
							});
						}
					});
				}
			}
			const { b3 } = res.data
			// const data = b3.risks.map((item: string, index: number) => {
			// 	return { value: b3.policyNumber[index], name: item }
			// }) //保单梳理分布汇总环形图数据
			let data = []
			if (Array.isArray(b3.risks) && Array.isArray(b3.policyNumber)) {
				data = b3.risks.map((item: any, index: any) => {
					return { value: b3.policyNumber[index], name: item };
				});
			}
			listbzzr.value = res.data.c1
			// state.barData.push(...res.data.c1.minProtectionAmount); //保单责任解读柱状图数据
			// state.barDatas.push(...res.data.c1.maxProtectionAmount.slice(0,3)); //保单责任解读柱状图数据
			// state.titleData.push(...res.data.c1.firstBilityName); //保单责任解读柱状图数据
			state.echartsData.push(...data)
			twoDistribution.push(...res.data.c2) //保单责任二级分布情况
			monthPremium.push(...res.data.d1) //缴费备忘录  按月
			if (monthPremium) {
				monthPremium.forEach((v: any) => {
					v.data.forEach((q: any) => {
						q.isexpand = false;
					});
				});
			}
			material = Object.assign(material, res.data.e3) //理赔指引数据
			sss = material.generalMaterial.split('<br/>')
			list.value = res.data.c2
			taskCodes = res.taskCode
		})
	}
}

const getProtectionAmountAll = (v: any) => {
	return v.reduce((sum:any, item:any) => {
        let value = 0;
        if (item.protectionAmount === '是') {
            value = 1;
        } else if (item.protectionAmount === '否') {
            value = 0;
        } else {
            // 尝试将字符串转换为浮点数
            // value = parseFloat(item.protectionAmount);
            value = Number(item.protectionAmount);
            // 如果转换失败（例如不是数字字符串），则默认为0
            if (isNaN(value)) {
                value = 0;
            }
        }
        return sum + value;
    }, 0);
}
let goDetailedVersionread = (code: string, names: string): void => {
	stores.sendThreeEvent(names)
	obj = {
		taskCode: route.query.taskCode,
		userType: route.query.userType,
		firstBilityCode: code,
		firstBilityName: names,
		face: route.query.face,
		isYsc: route.query.isYsc ? route.query.isYsc : 0,
	}
	detailedVersionreadShow.value = true
	// return
	// router.push({
	// 	name: 'detailedVersionread',
	// 	query: {
	// 		taskCode: route.query.taskCode,
	// 		userType: route.query.userType,
	// 		firstBilityCode: code,
	// 		firstBilityName: names,
	// 		face: route.query.face,
	// 		isYsc: route.query.isYsc ? route.query.isYsc : 0,
	// 	},
	// })
}
let formatviewPer = (viewPer: string): string => {
	if (viewPer === '0') {
		return '10年'
	} else if (viewPer === '1') {
		return '20年'
	} else if (viewPer === '2') {
		return '30年'
	} else if (viewPer === '3') {
		return '终身'
	}
	{
		return '-'
	}
}
</script>




<!-- 埋点业务分析 -->
<!-- 静态资源：
	一级：
		温馨提示  
		基本信息
		保单梳理
		保障责任解读
		费用筹划
		未来年度缴费水平
		其他客户权益
	二级：
		保单梳理-分布汇总
		保单梳理-被保人（特殊）
		保单梳理-投保人（特殊）
		保障责任解读-可季度条款列表（特殊）
		保障责任季度-保障责任一览
		保障责任解读-保障责任分布情况
		其他客户权益-价值解读
		其他客户权益-保障受益人列表
		其他客户权益-理赔指引
	三级：（弹窗事件）
		温馨提示（虽然是弹窗，但是归于一级）
		可解读条款列表弹窗
		身故责任
		全残/高残责任
		伤残责任
		疾病责任
		医疗责任
		生存金责任
		其他责任

 
 
 
 -->




<!-- 该页面存在动态的地方有 -->
<!-- 
保单梳理 =》被保人，投保人 table切换         （二级）
保障责任解读=》可解读条款列表   隐藏显示     （二级）
未来年度缴费水平  =》曲线和表格的table切换  （一级）

处理方案：经分析，在切换时，首先获取最新的高度，并且请求对应的埋点事件

-->
<!-- 该页面存在动态弹框的地方有   三级事件 -->
<!-- 
进入页面的温馨提示 
保障责任解读 =》可解读条款的精读
保障责任解读 =》 保障责任分布情况=》保障责任精度 


处理方案：经分析，在页面唤起对应弹窗时，调用对应的点击埋点事件，
在弹窗关闭时，调用对应二级模块的埋点事件（现在默认不存在 埋点关闭事件）

-->